<template>
  <div class="content">
    <van-tree-select
      class="tree-select"
      v-model:main-active-index="activeIndex"
      :items="items"
      height="100%"
    >
      <template #content>
        <Goods :phones="phoneView" />
        <Nothing v-if="phoneView.length === 0" />
      </template>
    </van-tree-select>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { usePhoneStore } from "@/stores/phone";
import Goods from "@/components/Goods.vue";
import Nothing from "./Nothing.vue";

const props = defineProps({
  searchKeyword: {
    type: String,
    default: "",
  },
});

const phoneStore = usePhoneStore();
const phoneData = computed(() => phoneStore.phones);
const phoneView = computed(() => phoneData.value.filter(items.value[activeIndex.value].limit));

const activeIndex = ref(0);
const items = ref([
  {
    text: "搜索结果",
    limit: (item) => {
      if (props.searchKeyword === "") return false;
      return item.name.toLowerCase().includes(props.searchKeyword.toLowerCase());
    },
  },
  {
    text: "全部手机",
    limit: (item) => true,
  },
  {
    text: "小米系列",
    limit: (item) => item.name.toLowerCase().startsWith("xiaomi"),
  },
  {
    text: "红米系列",
    limit: (item) => item.name.toLowerCase().startsWith("redmi"),
  },
  {
    text: "1k+系列",
    limit: (item) => item.price > 1000 && item.price <= 2000,
  },
  {
    text: "2k+系列",
    limit: (item) => item.price > 2000 && item.price <= 3000,
  },
  {
    text: "3k+系列",
    limit: (item) => item.price > 3000 && item.price <= 4000,
  },
  {
    text: "4k+系列",
    limit: (item) => item.price > 4000 && item.price <= 5000,
  },
  {
    text: "5k+系列",
    limit: (item) => item.price > 5000 && item.price <= 6000,
  },
  {
    text: "6k+系列",
    limit: (item) => item.price > 6000 && item.price <= 7000,
  },
  {
    text: "7k+系列",
    limit: (item) => item.price > 7000 && item.price <= 8000,
  },
  {
    text: "8k+系列",
    limit: (item) => item.price > 8000 && item.price <= 9000,
  },
  {
    text: "9k+系列",
    limit: (item) => item.price > 9000 && item.price <= 10000,
  },
]);
</script>

<style scoped>
.content {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

/* 修改右侧滚动区域 */
:deep(.van-tree-select__content) {
  overflow-y: auto;
  height: 100%;
}

/* 保持左侧菜单不滚动 */
:deep(.van-tree-select__nav) {
  overflow-y: auto;
}

.tree-select {
  height: 100%;
}
</style>
